<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DotDashAcademy - Practice</title>
    <style>
        body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; background-color: #121212; color: #FFFFFF; margin: 0; padding: 20px; }
        .header { text-align: center; }
        .header p { color: #AAAAAA; }
        .header h2 { font-size: 24px; margin-top: 5px; }
        .audio-player { text-align: center; margin: 50px 0; }
        .play-button { background-color: #1E1E1E; border: 2px solid #00BFFF; width: 100px; height: 100px; border-radius: 50%; font-size: 40px; color: #00BFFF; }
        .options-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
        .option-btn { background-color: #1E1E1E; border: 2px solid #333; color: #FFFFFF; font-size: 28px; font-weight: bold; padding: 30px 0; border-radius: 15px; transition: all 0.2s ease-in-out; }
        .option-btn:hover { border-color: #00BFFF; }
        /* Example of correct/incorrect states */
        .option-btn.correct { background-color: #2E7D32; border-color: #2E7D32; }
        .option-btn.incorrect { background-color: #C62828; border-color: #C62828; }
        .footer-action { text-align: center; margin-top: 40px; }
        .footer-action a { color: #AAAAAA; text-decoration: none; }
    </style>
</head>
<body>
    <div class="header">
        <p>Receiving Practice: Level 1</p >
        <h2>What character is this?</h2>
    </div>

    <div class="audio-player">
        <button class="play-button">🔊</button>
    </div>

    <div class="options-grid">
        <button class="option-btn">A</button>
        <button class="option-btn">T</button>
        <button class="option-btn">S</button>
        <button class="option-btn">M</button>
    </div>

    <div class="footer-action">
        Skip Question
    </div>

</body>
</html>